/* global var */
var LEVEL, ARR_TARGET, ARR_USER, TIME_LEAST, GAME_FLAG, success_timer;

function init() {
    /* init global vars */
    LEVEL = 0;
    ARR_TARGET = [];
    ARR_USER = [];
    GAME_FLAG = true;
    /* timer */
    TIME_LEAST = 40000;
    update_time(TIME_LEAST);
    /* functions on */
    generate_arr(ARR_TARGET, LEVEL)
    layout();
}

/* layout */
/* 4 parts: title target random timer */
function layout() {
    var num_box = document.querySelectorAll('.num_box');
    var target_numbers = document.querySelector('.target_numbers');
    var arr_numbox_data = generate_numbox(ARR_TARGET);
    for (let index = 0; index < num_box.length; index++) {
        num_box[index].innerHTML = arr_numbox_data[index];
    }
    target_numbers.innerHTML = ARR_TARGET.join(',');
    $('.level_num > p > em').html(LEVEL + 1);
    update_color();
}

function update_time(ms) {
    var second = ms / 1000;
    var t_least = setInterval(function () {
        if (GAME_FLAG == true) {
            second--;
            $('.time_box').html(second)
            if (second <= 0) {
                second = 0;
                clearInterval(t_least)
                game_over()
            }
        } else {
            clearInterval(t_least)
        }
    }, 1000)
}

/* generate num_box */
function generate_numbox(arr_target) {
    var arr_min = arr_target;                        /* 任务数组筛重 */
    var arr_sup = generate_random_differ(arr_min.length);       /* 生成相应数目下标 */
    var arr_return = [];
    for (let index = 0; index < 18; index++) {
        arr_return.push(generate_random_num());
    }
    for (let index = 0; index < arr_sup.length; index++) {
        arr_return[arr_sup[index]] = arr_min[index]
    }
    return arr_return;
}

/* update color */
function update_color() {
    arr_color = ['#2c8ef8','#727cf5','#6b5eae','#ff679b','#fa5c7c','#fd7e14','#ffbc00','#0acf97','#02a8b5','#39afd1'];
    for (let index = 0; index < $('.num_box').length; index++) {
        
        $('.num_box').eq(index).css({ 'backgroundColor': arr_color[generate_random_num()] });
    }
    // $('.num_box').eq(1).css({ 'backgroundColor': '#fa5c7c' });
}

/* tools function */
function generate_random_num() {
    var num = Math.floor(10 * Math.random())
    return num;
}
function generate_random_differ(len) {
    var arr_return = [];
    while (arr_return.length < len) {
        var num = Math.floor(Math.random() * 18);
        if (arr_return.includes(num)) {
            continue;
        } else {
            arr_return.push(num);
        }
    }
    return arr_return;
}
function generate_arr(arr, level) {
    for (let index = 0; index < level + 2; index++) {
        arr.push(generate_random_num())
    }
}
function array_min(arr_source) {
    var arr_process = [];
    for (let index = 0; index < arr_source.length; index++) {
        if (arr_process.includes(arr_source[index]) == false) {
            arr_process.push(arr_source[index])
        }
    }
    return arr_process;
}

/* listener part */
$('.num_box').on('click', function (elem) {
    ARR_USER.push(parseInt(elem.target.innerHTML));
    $(this).addClass('active')
    if (judge_ipt()) {
        if (ARR_TARGET.length == ARR_USER.length) {
            $('.active').removeClass('active');
            game_continue();
        }
    } else {
        $('.active').removeClass('active');
        game_over();
    }
})

$('#btn_game_start').on('click', function () {
    $('.game_start').css({ 'display': 'none' });
    $('.game_main').css({ 'display': 'block' });
    game_main();
})

$('#btn_game_restart').on('click', function () {
    $('.game_end').css({ 'display': 'none' });
    $('.game_main').css({ 'display': 'block' });
    game_main();
})

/* software control */
function judge_ipt() {              /* ARR_USER VS ARR_TARGET */
    for (let index = 0; index < ARR_USER.length; index++) {
        if (ARR_TARGET[index] == ARR_USER[index]) {
            continue;
        } else {
            return false;
        }
    }
    return true;
}
function game_continue() {
    LEVEL++;
    ARR_TARGET = [];
    ARR_USER = [];

    generate_arr(ARR_TARGET, LEVEL)
    layout();
    console.log('game_continue');
}
function game_over() {
    console.log('game_over');
    // LEVEL = 0;
    ARR_TARGET = [];
    ARR_USER = [];
    GAME_FLAG = false;

    clearTimeout(success_timer);
    success_timer = null;

    generate_arr(ARR_TARGET, LEVEL)
    layout();
    alert('game over')
    $('.game_main').css({ 'display': 'none' });
    $('.game_end').css({ 'display': 'block' });
}
function game_main() {
    init();
}
